<template>
  <div class="cont_right_s">
    <div class="contract_base_title">{{ t('keys.BasicInformation') }}</div>
    <div class="cont_right_title">
      <div class="cont_right_t_p">
        {{ t('keys.initiatorName') }}:<span>{{ formData.initiatorName }}</span>
      </div>
      <div class="cont_right_t_t">
        {{ t('keys.status') }}:<span>{{ lovValut || '--' }} </span>
      </div>
      <div class="cont_right_t_t">
        {{ t('keys.apply_request_time') }}:<span>{{ approvalRecordData?.operateTime }}</span>
      </div>
    </div>
    <div class="contract_base_title">{{ t('keys.approvalRecord') }}</div>
    <div class="approval_record">
      <template v-if="activitiesList?.length" v-for="(itemLine, ind) in activitiesList" :key="ind">
        <div class="time-line" v-for="(item, index) in itemLine" :key="index">
          <template v-if="item.nodeType !== 'routingNode'">
            <div class="time-line-title">
              <!-- 节点icon -->
              <i class="zcb node-icon" :class="item.icon" :style="{ color: item.color, fontSize: item.size }"></i>
              <!-- 节点名称 + 操作 -->
              <span> {{ item.activityName + (item.approveType ? ' - ' + item.approveTypeCn : '') || t('keys.Node_exception') }}</span>
            </div>
            <!-- 开始节点 结束节点 -->
            <div class="time-line-card" v-if="item.nodeType == 'startNode' || item.nodeType == 'endNode'">
              <div class="card-title">
                <template v-if="item.nodeType == 'startNode'">{{ item.assigneeNameList ? item.assigneeNameList.toString() : '' }}</template>
                <template v-if="item.nodeType == 'endNode'">{{ item.processInstanceStatusCn }}</template>
                <span v-if="item.nodeType == 'startNode'">提交单据</span>
                <span>{{ item.operateTime }}</span>
              </div>
            </div>
            <!-- 已操作的  包含 已审批"ALREADY" 绿色字 -->
            <div class="time-line-card" v-if="item.operated?.length || item.operatedRed?.length">
              <template v-for="(v, i) in item.operated" :key="i">
                <!-- 已操作的 -->
                <div class="operated">
                  <div class="check-item">
                    <i class="zcb zcbpizhun" style="color:#48D000"></i>
                    <span class="name">{{ v.approvalName }}</span>
                    <span class="status">{{ v.approveActionCn }}</span>
                    <span class="time">{{ v.operateTime }}</span>
                  </div>
                  <div class="remark">
                    审批意见：
                    <span v-for="(a, b) in v.comment" :key="b">
                      {{ a }}
                    </span>
                  </div>
                </div>
              </template>
              <!-- 已操作 驳回"REFUSE" 红色字 -->
              <template v-for="(v, i) in item.operatedRed" :key="i">
                <!-- 已操作的 -->
                <div class="operated">
                  <div class="check-item">
                    <i class="zcb zcbbohui" style="color:#ff4a4a"></i>
                    <span class="name">{{ v.approvalName }}</span>
                    <span class="status" style="color: var(--el-color-danger)">{{ v.approveActionCn }}</span>
                    <span class="time">{{ v.operateTime }}</span>
                  </div>
                  <div class="remark">
                    审批意见：
                    <span v-for="(a, b) in v.comment" :key="b"> {{ a }} </span>
                  </div>
                </div>
              </template>
            </div>
            <!-- 未操作的 包含 待审批PENDING 未审批DISCARD 前加签BEFORE_ADD_SIGN 后加签AFTER_ADD_SIGN 转交TRANSFER 灰色字 -->
            <div class="time-line-card" v-if="item.noOperated?.length">
              <div class="not-operated">
                <i class="zcb zcbshijian" style="color:#999999"></i>
                <template v-for="(v, i) in item.noOperated" :key="i">
                  <!-- 未操作的 -->
                  <span>{{ v.approvalName + (v.extension || '') + (i === item.noOperated.length - 1 ? '' : '、') }}</span>
                  <em style="color:#999999" v-if="i === item.noOperated.length - 1">{{ v.approveActionCn }}</em>
                </template>
              </div>
            </div>
            <!-- 挂起  等待审批 -->
            <div class="time-line-card" v-if="item.blocked?.length">
              <div class="not-operated">
                <i class="zcb zcbshijian" style="color:#999999"></i>
                <template v-for="(v, i) in item.blocked" :key="i">
                  <!-- 未操作的 -->
                  <span>{{ v.approvalName + (i === item.blocked.length - 1 ? '' : '、') }}</span>
                  <em style="color:#999999" v-if="i === item.blocked.length - 1">
                    等待审批
                  </em>
                </template>
              </div>
            </div>
            <div class="time-line-card" v-if="item.cc?.length">
              <template v-for="(v, i) in item.cc" :key="i">
                <!-- 已操作的 -->
                <div class="operated" style="margin:0;">
                  <div class="check-item">
                    <!-- <i class="zcb zcbpizhun" style="color:#48D000"></i> -->
                    <span class="status" style="margin:0;">{{ v.approveActionCn }}</span>
                    <span class="name">{{ v.assigneeNameList }}</span>
                    <span class="time">{{ v.operateTime }}</span>
                  </div>
                </div>
              </template>
            </div>
            <!-- 特殊操作 包含  前加签BEFORE_ADD_SIGN 后加签AFTER_ADD_SIGN 转交TRANSFER 撤回REVOKE 终止审批 -->
            <template v-if="item.addSign?.length" v-for="(v, i) in item.addSign" :key="i">
              <div class="time-line-card red">
                <div class="item-line">
                  <i class="zcb zcbjinggao"></i>
                  <span class="name">{{ v.approvalName }}</span>
                  <span class="time">{{ v.operateTime }}</span>
                </div>
                <div class="remark" v-if="v.extension">
                  {{ v.extension }}
                </div>
                <div class="remark" v-if="v.comment">
                  审批意见：
                  <span v-for="(a, b) in v.comment" :key="b">
                    {{ a }}
                  </span>
                </div>
              </div>
            </template>
            <!-- 条件展示区域 -->
            <template v-if="item.condition?.length" v-for="(v, i) in item.condition" :key="i">
              <div class="time-line-card">
                <i class="zcb zcbtiaojianfenzhi" style="font-size: 13px; color:rgb(123, 221, 196);"></i>
                <span class="time" style="margin-left:10px">{{ v.operateTime }}</span>
              </div>
            </template>
          </template>
        </div>
      </template>
      <el-empty :description="t('keys.table_empty_text')" v-else />
    </div>
  </div>

  <div class="botm_btns">
    <el-button type="info" class="showbpmn" @click.stop="flowchartShow">{{ t('keys.flowChart') }}</el-button>
    <template v-if="sourceType == 'toBeApproved' && approvalAction.length > 0">
      <!-- 小于两个按钮时 -->
      <template v-for="(item, index) in approvalAction" :key="index" v-if="approvalAction.length <= 2">
        <!-- 拒绝改为驳回 -->
        <el-button type="info" size="default" class="refuse" @click.stop="btnsClick(5)" v-if="item == 'REFUSE'">{{ t('keys.reject') }}</el-button>
        <el-button type="primary" class="approval" size="default" @click.stop="btnsClick(6)" v-else-if="item == 'APPROVE'">{{
          t('keys.approval')
        }}</el-button>
        <!-- <el-button type="primary" class="approval" size="default" @click.stop="btnsClick(0)" v-else-if="item == 'REJECT'">{{  t('keys.reject') }}</el-button> -->
        <el-button type="info" class="approval" size="default" @click.stop="btnsClick(1)" v-else-if="item == 'PRE_ADD_SIGN'">
          {{ t('keys.Front_endorsement') }}</el-button
        >
        <el-button type="info" class="approval" size="default" @click.stop="btnsClick(2)" v-else-if="item == 'AGREE_AND_ADD_SIGN'">{{
          t('keys.Post_endorsement')
        }}</el-button>
        <el-button type="info" class="approval" size="default" @click.stop="btnsClick(3)" v-else-if="item == 'TRANSFER'">{{
          t('keys.passed_on')
        }}</el-button>
        <el-button type="info" class="approval" size="default" @click.stop="btnsClick(4)" v-else-if="item == 'CC'">{{ t('keys.Cc') }}</el-button>
      </template>
      <!-- 大于两个按钮时 -->
      <template v-if="approvalAction.length > 2">
        <el-dropdown class="moreBtn">
          <span class="el-dropdown-link">
            ...
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <template v-for="(item, index) in approvalAction" :key="index">
                <template v-if="index >= 2">
                  <!-- <el-dropdown-item @click.stop="btnsClick(0)" v-if="item == 'REJECT'">{{  t('keys.reject') }}</el-dropdown-item> -->
                  <el-dropdown-item @click.stop="btnsClick(1)" v-if="item == 'PRE_ADD_SIGN'">{{ t('keys.Front_endorsement') }}</el-dropdown-item>
                  <el-dropdown-item @click.stop="btnsClick(2)" v-else-if="item == 'AGREE_AND_ADD_SIGN'">{{
                    t('keys.Post_endorsement')
                  }}</el-dropdown-item>
                  <el-dropdown-item @click.stop="btnsClick(3)" v-else-if="item == 'TRANSFER'">{{ t('keys.passed_on') }}</el-dropdown-item>
                  <!-- <el-dropdown-item @click.stop="btnsClick(4)" v-else-if="item == 'CC'">{{ t('keys.Cc') }}</el-dropdown-item> -->
                  <!-- 拒绝改为驳回 -->
                  <el-dropdown-item @click.stop="btnsClick(5)" v-else-if="item == 'REFUSE'">{{ t('keys.reject') }}</el-dropdown-item>
                  <el-dropdown-item @click.stop="btnsClick(6)" v-else-if="item == 'APPROVE'">{{ t('keys.approval') }}</el-dropdown-item>
                </template>
              </template>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <template v-for="(item, index) in approvalAction" :key="index">
          <div v-if="index < 2">
            <!-- <el-button type="primary" class="approval" size="default" @click.stop="btnsClick(0)" v-if="item == 'REJECT'">{{  t('keys.reject') }}</el-button> -->
            <el-button type="info" class="approval" size="default" @click.stop="btnsClick(1)" v-if="item == 'PRE_ADD_SIGN'">{{
              t('keys.Front_endorsement')
            }}</el-button>
            <el-button type="info" class="approval" size="default" @click.stop="btnsClick(2)" v-else-if="item == 'AGREE_AND_ADD_SIGN'">{{
              t('keys.Post_endorsement')
            }}</el-button>
            <el-button type="info" class="approval" size="default" @click.stop="btnsClick(3)" v-else-if="item == 'TRANSFER'">{{
              t('keys.passed_on')
            }}</el-button>
            <!-- <el-button type="primary" class="approval" size="default" @click.stop="btnsClick(4)" v-else-if="item == 'CC'">{{
              t('keys.Cc')
            }}</el-button> -->
            <!-- 拒绝改为驳回 -->
            <el-button type="info" size="default" class="refuse" @click.stop="btnsClick(5)" v-else-if="item == 'REFUSE'">{{
              t('keys.reject')
            }}</el-button>
            <el-button type="primary" class="approval" size="default" @click.stop="btnsClick(6)" v-else-if="item == 'APPROVE'">{{
              t('keys.approval')
            }}</el-button>
          </div>
        </template>
      </template>
    </template>
  </div>
</template>

<script setup>
import { ref, reactive, nextTick, onMounted, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRouter, useRoute } from 'vue-router'
import { getlovoptions } from '@/api/common'
import { ERR_OK } from '@/config/statusCode'
const { t } = useI18n() // 中英文
const router = useRouter()
const route = useRoute()
const emit = defineEmits(['flowchartShow', 'btnsClick'])

const props = defineProps({
  formData: {
    type: Object,
    default: {}
  },
  approvalRecordData: {
    type: Object,
    default: {}
  },
  activities: {
    type: Object,
    default: {}
  },
  approvalAction: {
    type: Array,
    default: []
  },
  instanceDetail: {
    type: Object,
    default: {}
  }
})
const activitiesList = ref([])
const sourceType = ref(route.query.sourceType || '')
const approveComment = ref(t('keys.approve_comment'))
const cc_comment = ref(t('keys.cc_comment'))
const lovValut = ref('')
const forData = () => {
  if (props.activities?.length > 0) {
    props.activities.forEach((activity) => {
      let arr = []
      activity.forEach((item, index) => {
        let json = { ...item, operated: [], operatedRed: [], noOperated: [], addSign: [], blocked: [], cc: [], condition: [] }
        if (['conditionNode'].includes(item.nodeType)) {
          json['condition'].push({
            operateTime: item.operateTime
          })
        }
        if (item?.recordDetail?.length) {
          item?.recordDetail.forEach((v) => {
            // 已操作的  包含 已审批"ALREADY" 后加签AFTER_ADD_SIGN 转交TRANSFER 绿色字
            if (['ALREADY', 'AFTER_ADD_SIGN'].includes(v.approveAction)) {
              json['operated'].push(v)
            }
            // 已操作 驳回"REFUSE" 红色字
            if (['REFUSE'].includes(v.approveAction)) {
              json['operatedRed'].push(v)
            }
            // 未操作的 包含 待审批PENDING 未审批DISCARD 前加签BEFORE_ADD_SIGN 转交TRANSFER 灰色字
            if (['PENDING', 'DISCARD', 'BEFORE_ADD_SIGN'].includes(v.approveAction)) {
              json['noOperated'].push(v)
            }
            // 特殊操作 包含  前加签BEFORE_ADD_SIGN 后加签AFTER_ADD_SIGN 转交TRANSFER 撤回REVOKE 终止审批
            // if (['TRANSFER'].includes(v.approveAction)) {
            //   json['addSign'].push(v)
            // }
            // 挂起
            if (['BLOCKED'].includes(v.approveAction)) {
              json['blocked'].push(v)
            }
            // 抄送
            if (['ccNode'].includes(item.nodeType)) {
              json['cc'].push({
                assigneeNameList: v.approvalName,
                operateTime: item.operateTime,
                approveActionCn: item.approveResultCn
              })
            }
            // 警告
            if ((!v.approveAction && v.extension) || v.approveAction === 'REVOKE') {
              json['addSign'].push(v)
            }
          })
        }
        arr.push(json)
      })
      activitiesList.value.push(arr)
    })
  }
}
const flowchartShow = () => {
  emit('flowchartShow', true)
}
const btnsClick = (num) => {
  emit('btnsClick', num)
}
const getlovoptionsApi = async () => {
  const { code, data } = await getlovoptions({ lovCode: 'ZWFK.INSTANCE_STATUS', tag: '' })
  if (code === ERR_OK) {
    data.map((item) => {
      if (item.valueCode === props.instanceDetail?.status) {
        lovValut.value = item.valueContent
      }
    })
  }
}
watch(
  () => props.activities,
  (newVal, oldVal) => {
    forData()
    getlovoptionsApi()
  },
  { deep: true }
)
defineExpose({})
</script>
<style lang="scss" scope>
.cont_right_s {
  height: 100%;
  margin-bottom: -16px;
  margin-right: -16px;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 16px 0 16px 16px;
  border-left: 1px var(--el-border-color) var(--el-border-style);
  position: relative;
  &::-webkit-scrollbar {
    height: 5px;
    width: 5px;
  }
  &::-webkit-scrollbar-corner {
    background: #204754;
  }
  &::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
  }
  &::-webkit-scrollbar-track {
    background: #fff;
    border-radius: 2px;
  }
  .contract_base_title {
    font-weight: 550;
    margin-bottom: 16px;
  }
  .cont_right_title {
    width: 100%;
    margin-bottom: 24px;
    .cont_right_t_p,
    .cont_right_t_t {
      font-size: 14px;
      font-weight: 400;
      color: #666666;
      line-height: 22px;
      span {
        margin-left: 10px;
        font-weight: none;
      }
    }
  }
  .approval_record {
    // max-height: 500px;
    height: calc(100vh - 36px - 44px - 16px - 80px - 120px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 16px 0 22px;
    margin-left: -20px;
    position: relative;
    cursor: pointer;
    &::-webkit-scrollbar {
      height: 5px;
      width: 5px;
    }
    &::-webkit-scrollbar-corner {
      background: #204754;
    }
    &::-webkit-scrollbar-thumb {
      background: #ccc;
      border-radius: 10px;
    }
    &::-webkit-scrollbar-track {
      background: #fff;
      border-radius: 2px;
    }
    .time-line {
      position: relative;
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 5px;
        width: 2px;
        background: #ccc;
        bottom: -16px;
      }
      &:last-child::before {
        display: none;
      }

      .time-line-title {
        display: flex;
        align-items: center;
        position: relative;
        z-index: 99;
        .node-icon {
          margin-right: 16px;
          width: 14px;
          height: 14px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-left: -6px;
          background: #fff;
        }
      }
      .time-line-card {
        background: #f1f1f1;
        margin: 10px 0 10px 18px;
        width: calc(100% - 38px);
        border-radius: 4px;
        padding: 10px;
        &.red {
          background: var(--el-color-warning-light-9);
          margin-top: 8px;
          .item-line {
            display: flex;
            align-items: center;
            color: var(--el-color-warning);
            .name {
              font-size: var(--zcb-font-size);
              font-weight: bold;
              margin-left: 8px;
            }
            .status,
            .time {
              margin-left: 8px;
            }
          }
          .remark {
            margin-top: 4px;
            margin-left: 25px;
            color: #999999;
            word-wrap: break-word;
            i {
              font-style: normal;
              color: var(--el-color-success);
              margin-left: 25px;
            }
          }
        }
        .card-title {
          font-size: var(--zcb-font-size);
          span {
            color: #999;
            margin-left: 8px;
          }
        }
        .operated {
          margin-bottom: 10px;
          .check-item {
            display: flex;
            align-items: center;
            span {
              font-size: var(--zcb-font-size);
              &.name {
                margin-left: 8px;
                font-weight: bold;
              }
              &.status {
                font-style: normal;
                color: var(--el-color-success);
                margin-left: 8px;
              }
              &.time {
                margin-left: 8px;
                color: #999999;
              }
            }
          }
          .remark {
            margin-top: 4px;
            margin-left: 22px;
            color: #999999;
            word-wrap: break-word;
            i {
              font-style: normal;
              color: var(--el-color-success);
              margin-left: 22px;
            }
          }
        }
        .not-operated {
          // display: flex;
          // align-items: center;
          // flex-wrap: wrap;
          .zcb {
            margin-right: 8px;
          }
          span {
            // margin-right: 8px;
            color: #666666;
          }
          em {
            font-style: normal;
            color: var(--el-color-danger);
            margin-left: 8px;
            font-size: var(--zcb-font-size);
          }
        }
      }
    }
  }
  // .time-line-card {
  //   padding: 12px;
  //   background: var(--zcb-form-value-bg-color);
  //   border-radius: 4px;
  //   &.red {
  //     background: var(--el-color-warning-light-9);
  //     margin-top: 8px;
  //     .item-line {
  //       display: flex;
  //       align-items: center;
  //       color: var(--el-color-warning);
  //       .name {
  //         font-size: var(--zcb-font-size);
  //         font-weight: bold;
  //         margin-left: 8px;
  //       }
  //       .status {
  //         margin-left: 8px;
  //       }
  //     }
  //     .remark {
  //       margin-top: 4px;
  //       margin-left: 22px;
  //       color: #999999;
  //       i {
  //         font-style: normal;
  //         color: var(--el-color-success);
  //         margin-left: 22px;
  //       }
  //     }
  //   }
  //   .operated {
  //     margin-bottom: 10px;
  //     .check-item {
  //       display: flex;
  //       align-items: center;
  //       span {
  //         font-size: var(--zcb-font-size);
  //         &.name {
  //           margin-left: 8px;
  //           font-weight: bold;
  //         }
  //         &.status {
  //           font-style: normal;
  //           color: var(--el-color-success);
  //           margin-left: 8px;
  //         }
  //         &.time {
  //           margin-left: 8px;
  //           color: #999999;
  //         }
  //       }
  //     }
  //     .remark {
  //       margin-top: 4px;
  //       margin-left: 22px;
  //       color: #999999;
  //       i {
  //         font-style: normal;
  //         color: var(--el-color-success);
  //         margin-left: 22px;
  //       }
  //     }
  //   }
  //   .not-operated {
  //     display: flex;
  //     align-items: center;
  //     flex-wrap: wrap;
  //     .zcb {
  //       margin-right: 8px;
  //     }
  //     span {
  //       margin-right: 8px;

  //       color: #666666;
  //     }
  //     em {
  //       font-style: normal;
  //       color: var(--el-color-danger);
  //       margin-left: 8px;
  //       font-size: var(--zcb-font-size);
  //     }
  //   }
  // }
}
.botm_btns {
  position: absolute;
  right: -16px;
  bottom: -32px;
  left: 1px;
  height: 64px;
  background: #fff;
  border-top: 1px var(--el-border-color) var(--el-border-style);
  border-left: 0px var(--el-border-color) var(--el-border-style);
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  .showbpmn {
    margin-right: 12px;
    position: relative;
    &::after {
      content: '';
      height: 20px;
      width: 1px;
      background: var(--el-border-color);
      position: absolute;
      right: -12px;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .refuse {
    margin-right: 12px;
  }
  .approval {
    margin-right: 12px;
  }
}
.moreBtn {
  margin-right: 12px;
}
</style>
